import { CommandDialog } from '@amcax/base';
import i18n from '@app-cad/common/utils/i18next';
import { CurvedBaseCommand, CurvedCmdDialogParams } from '@app-cad/types';
import { Select } from 'antd';
import { useEffect, useState } from 'react';
import { CommandLabeledItemWrapper } from '@app-cad/common/components/command-form/item-wrapper';
import { ReferenceCurve } from './reference-curve';
import { ReferenceSurface } from './reference-surface';
import { TangencySurface } from './tangency-surface';
import { TwoTangencySurfaces } from './two-tangency-surfaces';
import { Draft } from './draft';
import { TwoLimits } from './twoLimits';
import { LimitAndMiddle } from './limit-and-middle';

const CommandLinearSweep = ({
  title,
  onClose,
  props,
}: CurvedCmdDialogParams) => {
  const [mode, setMode] = useState<
    | 'ReferenceSurface'
    | 'ReferenceCurve'
    | 'TangencySurface'
    | 'TwoTangencySurfaces'
    | 'TwoLimits'
    | 'DraftDirection'
    | 'LimitAndMiddle'
  >('ReferenceSurface');

  // props需要为state，以确保props和mode同时更新，分发的模式不会收到错误的props
  const [editProps, setEditProps] = useState<any>();
  const [editDxid, setEditDxid] = useState<string>();

  useEffect(() => {
    setMode(props?.params?.mode ?? 'ReferenceSurface');
    setEditProps(props);
    setEditDxid(props?.shape);
  }, [props?.shape]);

  return (
    <CommandDialog
      title={title}
      onClose={onClose}
      placement='topLeft'
    >
      <CommandLabeledItemWrapper
        className='mt-5 px-5'
        label='类型'
      >
        <Select
          disabled={editDxid != null}
          options={[
            { value: 'ReferenceSurface', label: '使用参考曲面' },
            { value: 'ReferenceCurve', label: '使用参考曲线' },
            { value: 'TangencySurface', label: '使用切面' },
            { value: 'TwoTangencySurfaces', label: '使用双切面' },
            { value: 'TwoLimits', label: '两极限' },
            { value: 'LimitAndMiddle', label: '极限和中间' },
            { value: 'DraftDirection', label: '拔模方向' },
          ]}
          value={mode}
          onChange={(val) => {
            if (val !== mode) {
              setMode(val);
              setEditProps(null);
            }
          }}
        />
      </CommandLabeledItemWrapper>
      {mode === 'ReferenceSurface' && (
        <ReferenceSurface
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
      {mode === 'ReferenceCurve' && (
        <ReferenceCurve
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
      {mode === 'TangencySurface' && (
        <TangencySurface
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
      {mode === 'TwoTangencySurfaces' && (
        <TwoTangencySurfaces
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
      {mode === 'TwoLimits' && (
        <TwoLimits
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
      {mode === 'LimitAndMiddle' && (
        <LimitAndMiddle
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
      {mode === 'DraftDirection' && (
        <Draft
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
    </CommandDialog>
  );
};

export const cmdLinearSweep: CurvedBaseCommand = {
  id: 'CmdLinearSweep',
  label: 'command.linear-sweep',
  icon: 'commands/curved/sweep',
  create: (label, onClose, props) => (
    <CommandLinearSweep
      title={i18n.t(label)}
      onClose={onClose}
      props={props}
    />
  ),
};
